<template>
  <view class="withdraw">
    <!-- <view class="Navbar">
      <image
        class="img"
        @click="goback"
        src="/static/drawings/Frame.png"
        mode="scaleToFill"
      />
      <view class="tittle">{{ t("withdraw.title") }}</view>
      <view class="text" @click="record">
        {{ t("withdraw.rec") }}
      </view>
    </view> -->
    <view class="title">{{ t("withdraw.msg") }}</view>
    <view class="type">
      <text>{{ t("withdraw.pla") }}</text>
      <view class="bottom">
        <image
          class="img"
          src="/static/Withdrawal/Frame.png"
          mode="scaleToFill"
        />
        <view class="price">{{ user.balance }}<text>USDT</text></view>
      </view>
    </view>
    <view class="middle">
      <text>{{ t("withdraw.ente") }}</text>
      <view class="inside">
        <view class="left">
          <image
            class="img"
            src="/static/Withdrawal/Frame.png"
            mode="scaleToFill"
          />
          <image
            class="line"
            src="/static/Withdrawal/Line 10.png"
            mode="scaleToFill"
          />
        </view>
        <input style="flex: 1; color: #fff" v-model="cash" type="number" />
        <view class="right">
          <image
            class="line"
            src="/static/Withdrawal/Line 11.png"
            mode="scaleToFill"
          />
          <view class="all" @click="max">{{ t("withdraw.all") }}</view>
        </view>
      </view>
    </view>
    <view class="middle">
      <text>{{ t("withdraw.address") }}</text>
      <view class="inside1">
        <input style="flex: 1; color: #fff" v-model="address" type="text" />
      </view>
    </view>
    <view class="type">
      <text>{{ t("withdraw.actu") }}</text>
      <view class="bottom">
        <image
          class="img"
          src="/static/Withdrawal/Frame.png"
          mode="scaleToFill"
        />
        <view class="price">{{ num }}<text>USDT</text></view>
      </view>
      <view class="fee">
        <image class="img" src="/static/Frame.png" mode="scaleToFill" />
        <view
          >{{ t("withdraw.deducting") }} <text>{{ gis + "%" }}</text>
          {{ t("withdraw.fee") }}</view
        >
      </view>
    </view>

    <view class="text"> {{ t("withdraw.your") }}</view>
    <button class="button" :loading="loading" :disabled="loading" @click="draw">
      {{ t("withdraw.cfm") }}
    </button>
    <!-- 弹窗 -->
    <Popup :title="t('withdraw.mse')" ref="popup" />
    <!-- 弹窗 -->
  </view>
</template>

<script setup>
import { showSuccessToast, showFailToast, showToast } from "vant";
import { useUserStore } from "../../store/index";
const useStore = useUserStore();
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { ref, onMounted, watch, computed } from "vue";
import api from "../../networks/apis";
onMounted(async () => {
  userAssets();
  // getgis(0);
});
const gis = ref(0);
const fee = ref(0);
const cash = ref(""); //提现的钱
const address = ref(""); //钱包地址
const user = ref({});
const loading = ref(false); //按钮禁用

//返回
const goback = () => {
  uni.navigateBack({});
};
//跳转记录页
const record = () => {
  uni.navigateTo({ url: "/pages/drawings-a/index" });
};
//提现
import Popup from "../../components/Popup.vue";
//用ref调用子组件的方法
const message = "Withdrawal successful";
const popup = ref();
const confirm = () => {
  // 调用`showPopup`方法
  popup.value.showPopup();
};
//提现
const draw = () => {
  loading.value = true;
  if (cash.value && address.value) {
    api
      .withdrawal({ money: cash.value, address: address.value })
      .then(async ({ code, msg }) => {
        loading.value = false;
        if (code == 0) {
          showSuccessToast(message);
          await userAssets();
          confirm();
          cash.value = "";
          address.value = "";
        } else {
          cash.value = "";
          address.value = "";
          throw new Error(msg);
        }
      })
      .catch((err) => {
        loading.value = false;
        showFailToast(err.message);
        cash.value = "";
      });
  } else {
    showFailToast("Parameter error");
  }
};
const userAssets = async () => {
  const { data } = await api.userAssets();
  console.log(data);
  user.value = data;
};
const max = () => {
  cash.value = user.value.balance;
};
const getgis = async (num) => {
  const { data } = await api.getWithdrawalFee(num);
  gis.value = data.rate;
  fee.value = data.fee;
};
watch(cash, () => {
  getgis(cash.value);
});
const num = computed(() => {
  return cash.value - fee.value;
});
</script>

<style lang="scss" scoped>
.fee {
  position: absolute;
  /* transform: translate(100%, 50%); */
  bottom: 3%;
  right: 5%;
  height: 28rpx;
  font-size: 20rpx;
  font-family: Arial, Arial;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.3);
  line-height: 23rpx;
  display: flex;

  .img {
    width: 28rpx;
    height: 28rpx;
  }
}

.withdraw {
  //   width: 750rpx;
  //   height: 1624rpx;
  padding: 25rpx 0;
  background: linear-gradient(180deg, #040a40 0%, #042e40 0%, #0d1324 100%);

  .Navbar {
    width: 100%;
    height: 110rpx;
    display: flex;
    align-items: center;
    padding: 70rpx 30rpx 2rpx 30rpx;
    background: transparent;
    justify-content: space-between;

    .img {
      width: 40rpx;
      height: 40rpx;
    }

    .tittle {
      width: 280rpx;
      height: 32rpx;
      font-size: 28rpx;
      /* margin-left: 178rpx; */
      font-family: Arial, Arial;
      font-weight: bold;
      color: #ffffff;
      line-height: 33rpx;
      text-align: center;
      padding-left: 90rpx;
    }

    .text {
      width: 200rpx;
      height: 72rpx;
      font-size: 28rpx;
      font-family: Arial, Arial;
      font-weight: 400;
      color: #ffffff;
      line-height: 72rpx;
      background-image: url("/static/Withdrawal/Rectangle 1.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: center;
      margin: 0;
    }
  }

  .title {
    width: 528rpx;
    height: 46rpx;
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: 900;
    color: #ffffff;
    line-height: 38rpx;
    margin: 112rpx 112rpx 52rpx 105rpx;
  }

  .type {
    width: 690rpx;
    height: 168rpx;
    background-image: url("/static/Withdrawal/Rectangle 33.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-left: 26rpx;
    position: relative;

    text {
      font-size: 22rpx;
      font-family: Arial, Arial;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 26rpx;
    }

    .bottom {
      display: flex;
      align-items: center;
      font-size: 40rpx;
      font-family: Arial, Arial;
      font-weight: 900;
      color: #ffffff;
      line-height: 47rpx;

      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 18rpx;
      }

      text {
        font-size: 28rpx;
        font-family: Arial, Arial;
        font-weight: normal;
        color: #ffffff;
        line-height: 33rpx;
        margin-left: 18rpx;
      }
    }
  }

  .middle {
    width: 690rpx;
    height: 168rpx;
    background-image: url("/static/Withdrawal/Rectangle 33.png");
    background-size: cover;
    background-repeat: no-repeat;
    margin: 40rpx auto;
    padding-top: 32rpx;

    text {
      display: block;
      width: 642rpx;
      margin: 0 auto;
      font-size: 22rpx;
      font-family: Arial, Arial;
      font-weight: normal;
      color: rgba(255, 255, 255, 0.5);
      line-height: 26rpx;
    }
    .inside1,
    .inside {
      width: 642rpx;
      height: 72rpx;
      background-image: url("/static/Withdrawal/Rectangle 35.png");
      background-size: cover;
      background-repeat: no-repeat;
      margin: 20rpx auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
        align-items: center;

        .img {
          width: 40rpx;
          height: 40rpx;
          margin: 0 20rpx;
        }

        .line {
          width: 2rpx;
          height: 38rpx;
        }
      }

      .right {
        display: flex;
        align-items: center;

        .line {
          margin-right: 20rpx;
          width: 2rpx;
          height: 38rpx;
        }

        .all {
          font-size: 32rpx;
          font-family: Arial, Arial;
          font-weight: 900;
          color: #ffffff;
          line-height: 38rpx;
          margin-right: 14rpx;
        }
      }
    }
    .inside1{
      padding-left: 18rpx;
    }
  }

  .text {
    display: block;
    width: 582rpx;
    height: 22rpx;
    font-size: 20rpx;
    font-family: Arial, Arial;
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
    line-height: 23rpx;
    text-align: center;
    margin: 44rpx auto 76rpx;
  }

  .button {
    width: 526rpx;
    height: 112rpx;
    background-image: url("/static/Withdrawal/Rectangle 62.png");
    font-size: 32rpx;
    font-family: Arial, Arial;
    font-weight: bold;
    color: #ffffff;
    line-height: 112rpx;
    background-size: cover;
    background-repeat: no-repeat;
  }
}
</style>
